<template>
  <div id="content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>信息中心</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="form">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="myInput">
          <el-form-item label="公告分类:">
            <el-select v-model="form.class" placeholder="请选择">
              <el-option label="公告通知" value="公告通知"></el-option>
              <el-option label="公司新闻" value="公司新闻"></el-option>
              <el-option label="规章制度" value="规章制度"></el-option>
              <el-option label="办事指南" value="办事指南"></el-option>
              <el-option label="下载中心" value="下载中心"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标题:">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="发布人:">
            <el-input v-model="form.author"></el-input>
          </el-form-item>
        </div>
        <div class="myInput">
          <el-form-item label="状态:">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <div class="block">
            <span class="demonstration">操作时间:</span>
            <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div id="operation">
            <el-row>
              <el-button type="primary" @click="onSerch">查询</el-button>
              <el-button type="primary" @click="dialogVisible = true">新增</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-row>
          </div>
        </div>

        <el-divider></el-divider>

        <div id='table'>
          <el-table :data="showPage" stripe style="width: 100%">
            <el-table-column prop="notice_id" label="排序号" width="100">
            </el-table-column>
            <el-table-column prop="notice_className" label="公告分类" width="150">
            </el-table-column>
            <el-table-column prop="notice_title" label="标题 " width="300">
            </el-table-column>
            <el-table-column prop="notice_author" label="操作人" width="200">
            </el-table-column>
            <el-table-column prop="notice_time" label="操作时间" width="200">
            </el-table-column>
            <el-table-column prop="notice_stateName" label="状态">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="onLook(scope.row)" type="primary" size="small">查看</el-button> -->
                <el-button @click="onEdit(scope.row)" type="warning" size="small">编辑</el-button>
                <el-button type="danger" size="small" @click='handleDel(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" id='page'>
          <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="count" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <!-- 新增模态框 -->
        <el-dialog title="新增公告" :visible.sync="dialogVisible" width="60%" @opened="addShow" @close="del" :before-close="handleClose">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="公告分类" prop="class">
              <el-select v-model="ruleForm.class" placeholder="请选择">
                <el-option label="公告通知" value="1"></el-option>
                <el-option label="公司新闻" value="2"></el-option>
                <el-option label="规章制度" value="3"></el-option>
                <el-option label="办事指南" value="4"></el-option>
                <el-option label="下载中心" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="摘要">
              <el-input type="textarea" v-model="ruleForm.digest"></el-input>
            </el-form-item>
            <el-form-item label="标签">
              <el-input v-model="ruleForm.tag"></el-input>
            </el-form-item>
            <el-form-item label="发布时间" required>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="请选择日期" prop="date1" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="发布人" prop="author">
              <el-input v-model="ruleForm.author" disabled></el-input>
            </el-form-item>
            <div id="details">
              <span>*</span><span>内容</span>
              <div id="box">
              </div>
            </div>
            <el-form-item label="状态">
              <el-radio-group v-model="ruleForm.state">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否页面置顶">
              <el-radio-group v-model="ruleForm.top">
                <el-radio label="是" value="是"></el-radio>
                <el-radio label="否" value="否"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onAdd">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑模态框 -->
        <el-dialog title="编辑公告" :visible.sync="editVisible" width="60%" @opened="editShow" @close="editDel" :before-close="handleClose">
          <el-form :model="editForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="公告分类" prop="class">
              <el-select v-model="editForm.class" placeholder="请选择">
                <el-option label="公告通知" value="1"></el-option>
                <el-option label="公司新闻" value="2"></el-option>
                <el-option label="规章制度" value="3"></el-option>
                <el-option label="办事指南" value="4"></el-option>
                <el-option label="下载中心" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="editForm.title"></el-input>
            </el-form-item>
            <el-form-item label="摘要">
              <el-input type="textarea" v-model="editForm.digest"></el-input>
            </el-form-item>
            <el-form-item label="标签">
              <el-input v-model="editForm.tag"></el-input>
            </el-form-item>
            <el-form-item label="发布时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="请选择日期" prop="date1" v-model="editForm.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="发布人" prop="author">
              <el-input v-model="editForm.author" disabled></el-input>
            </el-form-item>
            <div id="details">
              <span>*</span><span>内容</span>
              <div id="edBox">
              </div>
            </div>
            <el-form-item label="状态">
              <el-radio-group v-model="editForm.state">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否页面置顶">
              <el-radio-group v-model="editForm.top">
                <el-radio label="是" value="是"></el-radio>
                <el-radio label="否" value="否"></el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="editOk">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>
    </div>
  </div>
</template>
<script>
// 引入富文本
let editor;
let edEditor;
import E from 'wangeditor'
export default {
  data() {
    return {
      addContent: "请输入内容",
      current: '',
      total: 0,
      count: 5,
      page: 1,
      editorContent: '',
      edEditorContent: '',
      tableData: [],
      form: {
        class: '',
        title: '',
        author: '',
        state: '',
        time: [],
        addContent: '',
      },
      // currentPage4: 1,
      dialogVisible: false,
      editVisible: false,
      ruleForm: {
        author: '200001',
        class: '',
        title: "",
        date1: '',
        digest: "",//摘要
        tag: "",//标签
        top: '否',//置顶
        state: '1',//状态
      },
      editForm: {//编辑内容
        author: '',
        class: '',
        title: "",
        date1: '',
        digest: "",//摘要
        tag: "",//标签
        top: '',//置顶
        state: '1',//状态
        content: '',
        id: 1,
      },
      value1: "",
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '请选择公告分类', trigger: 'change' }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],


      }
    }
  },
  methods: {
    addShow() {
      // 富文本
      editor = new E('#box')
      editor.customConfig.onchange = (html) => {
        this.editorContent = html//editorContent为自己定义的变量
      }
      editor.create()
      // console.log(editor);
    },
    del() {
      let Odiv1 = document.getElementById("box");
      Odiv1.innerHTML = "";
    },
    // 每页显示条数
    sizeChange(n) {
      this.count = n
    },
    // 关闭弹框
    handleClose() {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //this.addVisible = false;
          // console.log(action, instance)
          if (action == 'cancel') {
            this.dialogVisible = true;
            this.editVisible = true;
          } else if (action == 'confirm') {
            this.dialogVisible = false;
            this.editVisible = false;
          }
        }
      })
    },
    // 页码改变
    currentChange(n) {
      this.page = n
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取后台数据
    getNew() {
      this.$axios({
        url: '/information/getNew',
      }).then((res) => {
        // console.log(res.data.data);
        this.total = res.data.data.length
        this.tableData = res.data.data
      })
    },
    // 查询
    onSerch() {
      this.page = 1;
      let data = this.form
      this.$axios({
        url: '/information/postNew',
        method: 'post',
        data: {
          data
        }
      }).then((res) => {
        // console.log(res);

        this.total = res.data.data.length
        this.tableData = res.data.data
      })
    },
    // 重置
    onReset() {
      this.form = {
        class: '',
        title: '',
        author: '',
        state: '',
        time: [],
      };
      this.getNew();
      this.page = 1;
      this.count = 5
    },
    // 增加
    onAdd() {
      this.dialogVisible = false;
      console.log(this.ruleForm, editor.txt.text());
      this.$axios({
        url: '/information/postAdd',
        method: 'post',
        data: {
          data: {
            data: this.ruleForm,
            editor: editor.txt.text()
          }
        }
      }).then((res) => {
        // console.log(res.data.code == 200);
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          })
        }

      })
    },
    // 打开编辑框
    onEdit(data) {
      this.editVisible = true;
      // console.log(data);
      // console.log(this.editForm.state, String(data.notice_stateId));
      this.editForm.author = data.notice_author
      this.editForm.class = data.notice_className
      this.editForm.title = data.notice_title
      this.editForm.date1 = data.notice_time
      this.editForm.digest = data.digest
      this.editForm.tag = data.tag
      this.editForm.top = data.top
      this.editForm.state = String(data.notice_stateId)
      this.editForm.content = data.notice_content
      this.editForm.id = data.notice_id
    },
    //编辑框富文本创建
    editShow() {
      edEditor = new E('#edBox')
      edEditor.customConfig.onchange = (html) => {
        this.edEditorContent = html//editorContent为自己定义的变量
      }
      edEditor.create()
      //获取富文本内容并把后台数据渲染进去
      edEditor.txt.text(this.editForm.content)
      // console.log(edEditor.txt.text(this.editForm.content));
      // console.log(edEditor);
    },
    // 关闭时删除富文本,不然会重复创建富文本
    editDel() {
      let Odiv1 = document.getElementById("edBox");
      Odiv1.innerHTML = "";
    },
    // 确定按钮
    editOk() {
      this.editVisible = false;
      this.editForm.content = edEditor.txt.text()
      // console.log(this.editForm);
      this.$axios({
        url: "/information/postEdit",
        method: 'post',
        data: {
          data: this.editForm
        }
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"

          })
        } this.getNew()
      })
    },
    // 删除
    handleDel(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/information/postDel',
          method: 'post',
          data: {
            id: data.notice_id
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.tableData = this.tableData.filter((v) => {
              if (v.notice_id != data.notice_id) {
                return v
              }
            })
            this.total = this.tableData.length
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  mounted() {
    // 加载完成后执行获取数据
    this.getNew()
  },
  computed: {
    // 分页
    showPage() {
      return this.tableData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  }
}
</script>

<style scoped>
.text {
  border: 1px solid #ccc;
  height: 40px;
}
#form {
  background-color: white;
  margin-top: 30px;
}
.el-input {
  width: 300px;
  margin-right: 20px;
}
.myInput {
  display: flex;
  padding-top: 20px;
}
#page {
  text-align: right;
  margin-top: 30px;
}
.demonstration {
  font-size: 14px;
  color: #606266;
  margin-left: 30px;
  margin-right: 10px;
}
hr {
  margin: 30px 0;
  border: 1px solid #f2f2f2;
}
#operation {
  text-align: right;
  margin-right: 20px;
}
#details span:first-child {
  color: red;
  margin-left: 50px;
}
#operation {
  flex: 1;
}
</style>